const s = {
  v: `
          attribute vec4 a_position;
          void main() {
              gl_Position = a_position;
              gl_PointSize = 10.0;
            }
      `,
  f: `
      precision mediump float;
      void main() {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
      }
      `,
}

// 得到着色器程序
const program = getProgram(gl, s)
// 获取着色器程序中的变量
const a_position = gl.getAttribLocation(program, "a_position")

//TODO 创建顶点数据
function createLines(line) {
  //  0.5, -0.5, -0.5, 0.5, 0.5, 0.5,
  const posints = new Float32Array(line)
  // 创建缓冲对象
  const buffer = gl.createBuffer()
  // 绑定缓冲对象
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
  // 填充缓冲对象
  gl.bufferData(gl.ARRAY_BUFFER, posints, gl.STATIC_DRAW)
  // 配置变量
  gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0)
  // 启用变量
  gl.enableVertexAttribArray(a_position)
}

// 绘制程序
// POINTS: 绘制顶点集合(一系列点)
// LINES: 线段,如果是奇数则最后一个会被忽略
// LINE_STRIP: 绘制线段(会闭合起点和终点)
// LINE_LOOP: 绘制线段(不会闭合起点和终点)
// TRIANGLES: 绘制单独三角形(填充状态) 最少三个 顶点 且绘制多个三角时必须是三的倍数
// TRIANGLE_FAN: 扇状三角形(填充状态)
// TRIANGLE_STRIP:一系列条带状三角形
// ;[
//   [-1, -1],
//   [1, 1],
//   [-0.5, 0.5],
// ].forEach((line) => {
//   createLines(line)
//   gl.drawArrays(gl.LINES, 0, 4)
// })
// gl.drawArrays(gl.LINE_STRIP, 0, 3)

let i = 0
const line_complete_arr = []
const lines = [
  [0, 0.5],
  [-0.2, 0],
  [-0.7, 0],
  [-0.3, -0.3],
  [-0.5, -0.9],
  [0.0, -0.5],
  [0.5, -0.9],
  [0.3, -0.3],
  [0.7, 0],
  [0.2, 0],
  [0, 0.5],
]
setInterval(() => {
  if (i > lines.length - 1) {
    return
    // i = 0
  }
  gl.vertexAttrib4f(a_position, lines[i][0], lines[i][1], 0.0, 1.0)
  line_complete_arr.push(...lines[i])
  createLines(line_complete_arr)
  gl.drawArrays(gl.LINE_STRIP, 0, line_complete_arr.length / 2)

  i += 1
}, 500)
